<!doctype html><html><head>
    <title>A canvas resize example</title>

<script src="../uuCanvas.js"></script>

<script>
function xcanvas() {
    drawShape(document.getElementById('slcanvas'));
    drawShape(document.getElementById('vmlcanvas'));
    drawShape(document.getElementById('flashcanvas'));
}
function matrix() {
    drawShape(document.getElementById('slcanvas'), 1);
    drawShape(document.getElementById('vmlcanvas'), 1);
    drawShape(document.getElementById('flashcanvas'), 1);
}
function redraw() {
    drawShape(document.getElementById('slcanvas'));
    drawShape(document.getElementById('vmlcanvas'));
    drawShape(document.getElementById('flashcanvas'));
}
function drawShape(canvas, matrix){
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (matrix) {
        ctx.rotate(Math.PI / 36);
    }
    ctx.save();
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);

    ctx.font = "64pt Arial";
    ctx.textBaseline = "top";

    ctx.fillStyle = "orange";
    ctx.fillText("fill", 22, 22);
    ctx.restore();
}
function reduce() {
    resize("slcanvas", -10, -10);
    resize("vmlcanvas", -10, -10);
    resize("flashcanvas", -10, -10);
}
function wide() {
    resize("slcanvas", 10, 10);
    resize("vmlcanvas", 10, 10);
    resize("flashcanvas", 10, 10);
}
function resize(id, width, height) {
    var node = document.getElementById(id),
        ctx = node.getContext("2d"),
        w = parseInt(node.width) + width,
        h = parseInt(node.height) + height;

    if (ctx.clear) {
        ctx.clear();
    } else {
        ctx.clearRect(0, 0, w, h);
    }
    node.width  = w;
    node.height = h;
/*
    if (ctx.resize) {
        ctx.resize(w, h);
    }
 */
}
</script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>

  <body>
    <h1>canvas <code>resize</code> example</h1>
    <div>
      <input type="button" value="[+] wide" onclick="wide()" />
      <input type="button" value="[-] reduce" onclick="reduce()" />
      <input type="button" value="[R] redraw" onclick="redraw()" />
      <input type="button" value="matrix effect" onclick="matrix()" />
      <br />
      <canvas id="slcanvas" class="sl" width="150" height="150"></canvas>
      <canvas id="vmlcanvas" class="vml" width="150" height="150"></canvas>
      <canvas id="flashcanvas" class="flash" width="150" height="150"></canvas>
      <br />
<pre>
&lt;input type="button" value="[+] wide" onclick="wide()" /&gt;
&lt;input type="button" value="[-] reduce" onclick="reduce()" /&gt;
&lt;input type="button" value="[R] redraw" onclick="redraw()" /&gt;

&lt;canvas id="slcanvas" class="sl" width="150" height="150"&gt;&lt;/canvas&gt;
&lt;canvas id="vmlcanvas" class="vml" width="150" height="150"&gt;&lt;/canvas&gt;
&lt;canvas id="flashcanvas" class="flash" width="150" height="150"&gt;&lt;/canvas&gt;

function xcanvas() {
    drawShape(document.getElementById('slcanvas'));
    drawShape(document.getElementById('vmlcanvas'));
    drawShape(document.getElementById('flashcanvas'));
}
function matrix() {
    drawShape(document.getElementById('slcanvas'), 1);
    drawShape(document.getElementById('vmlcanvas'), 1);
    drawShape(document.getElementById('flashcanvas'), 1);
}
function redraw() {
    drawShape(document.getElementById('slcanvas'));
    drawShape(document.getElementById('vmlcanvas'));
    drawShape(document.getElementById('flashcanvas'));
}
function drawShape(canvas, matrix){
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (matrix) {
        ctx.rotate(Math.PI / 36);
    }
    ctx.save();
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);

    ctx.font = "64pt Arial";
    ctx.textBaseline = "top";

    ctx.fillStyle = "orange";
    ctx.fillText("fill", 22, 22);
    ctx.restore();
}
function reduce() {
    resize("slcanvas", -10, -10);
    resize("vmlcanvas", -10, -10);
    resize("flashcanvas", -10, -10);
}
function wide() {
    resize("slcanvas", 10, 10);
    resize("vmlcanvas", 10, 10);
    resize("flashcanvas", 10, 10);
}
function resize(id, width, height) {
    var node = document.getElementById(id),
        ctx = node.getContext("2d"),
        w = parseInt(node.width) + width,
        h = parseInt(node.height) + height;

    if (ctx.clear) {
        ctx.clear();
    } else {
        ctx.clearRect(0, 0, w, h);
    }
    node.width  = w;
    node.height = h;
    if (ctx.resize) {
        ctx.resize(w, h);
    }
}
</pre>
    </div>
  </body>
</html>
